
<template>
  <div class="AddNew">
    <el-card>
      <!-- 步骤 -->
      <el-steps class="elstep" :active="active" finish-status="success">
        <el-step title="基础信息" />
        <el-step title="分配库位" />
      </el-steps>
      <!-- 表单组件 -->
      <component
        :is="AddNewCard"
        v-show="active === 0"
        ref="AddNewCard"
        :enum-name="enumName"
        @submit="submit"
        @getDEtail="getDEtail"
      />

      <el-row type="flex" justify="center">
        <el-button @click="returnBack">返回</el-button>
        <el-button class="next">{{ btnText }}</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import commerceEnum from '@/constan/commerce'
import TableCard from '@/components/TableCard'
import AddNewCard from '@/components/AddNewCard'
import { getCodeOwner, addOwner, getOwner, updataOwner, getOwnerDetail, getOwnerLocation, delOwnerLocation } from '@/api/owner'
import { CodeToText } from 'element-china-area-data'

export default {
  name: 'AddNew',
  components: { AddNewCard },
  props: {},
  data() {
    return {
      enumName: 'owner',
      formData: {
        id: this.$route.params.value
      },
      AddNewCard,
      commerceEnum,
      data: {
        ownerId: this.$route.params.value
      },
      TableCard,
      active: 0,
      isShowDialog: false
    }
  },
  computed: {
    btnText() {
      return this.active ? '提交' : '下一步'
    }

  },
  async created() {
  },
  methods: {
    // 返回按钮
    async returnBack() {
      if (this.active === 0) {
        this.$router.back()
      } else if (this.active === 1) {
        this.changeActive()
      }
    },
    // 根据id获取详情 编辑
    async getDEtail() {
      if (this.formData.id === 'null') {
        // 获取编号
        const { data } = await getCodeOwner()
        this.$set(this.formData, 'code', data.code)
        this.$refs.AddNewCard.formData = {
          ...this.$refs.AddNewCard.formData,
          code: data,
          location: []
        }
      } else {
        const { data } = await getOwner(this.$route.params.value)
        this.dataHandle(data)
      }
    },
    // 数据回显，如果是location就额外处理
    dataHandle(data) {
      for (const key in data) {
        if (key === 'location') {
          const location = []
          location[0] = data.province
          location[1] = data.area
          location[2] = data.city
          this.$set(this.$refs.AddNewCard.formData, key, location)
        } else {
          this.$set(this.$refs.AddNewCard.formData, key, data[key])
        }
      }
    },
    // 修改步骤条
    changeActive() {
      this.active = this.active === 1 ? 0 : 1
    },
    // 渲染页面方法（获取数据）
    async render(params = {}) {
      const { data } = await getOwnerLocation({
        ...this.data,
        size: params.size ? params.size : 10,
        current: params.current ? params.current : 1
      })
      this.$refs.TableCard.basicData = data.records
      this.length = data.records.length
      this.$refs.TableCard.total = +data.total
      this.total = +data.total
      this.$refs.TableCard.size = +data.size
      this.$refs.TableCard.current = +data.current
    },

  }
}
</script>

<style lang="scss">
.AddNew{

.el-input__inner {
  background-color: #f8f5f5;
  border-color: transparent;
}
}

.AddNewCard,.TableCard {
  .el-input__inner {
    background-color: #f8f5f5;
    border-color: transparent;
  }

  .el-card {
    border: none;
    box-shadow: none;
  }
}
.el-cascader-node.is-active,
.el-cascader-node.in-active-path {
  color: #ffb200;
}
</style>

<style lang="scss" scoped>
.AddNew {
  width: 95%;
  margin: 20px auto;
.el-button:focus, .el-button:hover {
    color: #fff;
    border-color: transparent;
    background-color: #ff9900;
}
  .el-card {
    border-radius: 10px;
        .el-button{
        border-radius: 20px;
        width: 150px;
        margin: 10px 20px;
    }
        .next{
      background-color: #ffb200;
    }
    .elstep {
      width: 40%;
      margin: 75px auto 20px;
    }
    .el-form-item {
      margin: 0 20px;
    }
  }
}
</style>
